View GitHub Repository KCVV-Elewijt-Gatsby

Schedule Inspection
Subscribe
Passed
Push — feature/netlify-search ( 939dfd...fbe251 )
by Kevin Van
05:37
created

Search.tsx ➔ searchData   A

↳ Parent: src/components/Search.tsx

Complexity

Conditions 1

Size

Total Lines 10
Code Lines 9

Duplication

Lines 0
Ratio 0 %

Importance

Changes 0
Metric Value
eloc 9
dl 0
loc 10
rs 9.95
c 0
b 0
f 0
cc 1
1 
import React, { FunctionComponent, useState, MouseEvent, FormEvent, ChangeEvent } from "react"
2 

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    3
                

                                    
                                                    
                
                
                
import axios from "axios"

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    4
                

                                    
                                                    
                
                
                

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    5
                

                                    
                                                    
                
                
                
import "./Search.scss"

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    6
                

                                    
                                                    
                
                
                

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    7
                

                                    
                                                    
                
                
                
const Search: FunctionComponent = () => {

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    8
                

                                    
                                                    
                
                
                
  return (

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    9
                

                                    
                                                    
                
                
                
    <form action="https://www.google.be/search" method="get" className="search">

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    10
                

                                    
                                                    
                
                
                
      <input type="hidden" name="q" id="q" value="site:https://www.kcvvelewijt.be" />

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    11
                

                                    
                                                    
                
                
                
      <label htmlFor="search-str">Search</label>

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    12
                

                                    
                                                    
                
                
                
      <input type="text" name="q" id="search-str" onChange={searchData} />

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    13
                

                                    
                                                    
                
                
                
      <button type="submit" className="submit submit--search">

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    14
                

                                    
                                                    
                
                
                
        Search with Google

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    15
                

                                    
                                                    
                
                
                
      </button>

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    16
                

                                    
                                                    
                
                
                
      <p id="result"></p>

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    17
                

                                    
                                                    
                
                
                
    </form>

            


            
                                                                                                            
                                                                
            
                                    
            
            

                
                    18
                

                                    
                                                    
                
                
                
  )

            


            
                                                                        
                            
            
                                    
            
            

                
                    19
                

                                    
                                                    
                
                
                

            


            
                                                                        
                            
            
                                    
            
            

                
                    20
                

                                    
                                                    
                
                
                
  async function searchData(e: ChangeEvent<HTMLInputElement>) {

            


            
                                                                        
                            
            
                                    
            
            

                
                    21
                

                                    
                                                    
                
                
                
    console.log(e.target)

            


            
                                                                        
                            
            
                                    
            
            

                
                    22
                

                                    
                                                    
                
                
                
    console.log(

            


            
                                                                        
                            
            
                                    
            
            

                
                    23
                

                                    
                                                    
                
                
                
      `https://deploy-preview-384--kcvvelewijt.netlify.app/.netlify/functions/searchIndex?search=${e.target.value}&limit=25`

            


            
                                                                        
                            
            
                                    
            
            

                
                    24
                

                                    
                                                    
                
                
                
    )

            


            
                                                                        
                            
            
                                    
            
            

                
                    25
                

                                    
                                                    
                
                
                
    const result = await fetch(

            


            
                                                                        
                            
            
                                    
            
            

                
                    26
                

                                    
                                                    
                
                
                
      `https://deploy-preview-384--kcvvelewijt.netlify.app/.netlify/functions/searchIndex?search=${e.target.value}&limit=25`

            


            
                                                                        
                            
            
                                    
            
            

                
                    27
                

                                    
                                                    
                
                
                
    ).then((x) => x.json())

            


            
                                                                        
                            
            
                                    
            
            

                
                    28
                

                                    
                                                    
                
                
                
    console.log(result)

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    29
                

                                    
                                                    
                
                
                
  }

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    30
                

                                    
                                                    
                
                
                
}

            


            
                                                                                                            
                            
            
                                    
            
            

                
                    31
                

                                    
                                                    
                
                
                

            


            
                                                                                                            
                                                                
            
                                    
            
            

                
                    32
                

                                    
                                                    
                
                
                
export default Search

            


            
                                                        
            
                                    
            
            

                
                    33